﻿@mixin fx_swap_right($namespace:emb){
  ##{$namespace} .swapright {
    -webkit-animation-duration: .7s;
    -webkit-transform: perspective(800);
    -webkit-animation-timing-function: ease-out;
  }
  ##{$namespace} .swapright.in {
    -webkit-animation-name: swapRightIn;
  }
  ##{$namespace} .swapright.out {
    -webkit-animation-name: swapRightOut;
  }

  @-webkit-keyframes swapRightIn {
    0% {
      -webkit-transform: translate3d(0px, 0px, -800px) rotateY(70deg);
      opacity:0;
    }
    35% {
      -webkit-transform: translate3d(-180px, 0px, -400px) rotateY(20deg);
      opacity:1;
    }
    100% {
      -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
      opacity:1;
    }
  }

  @-webkit-keyframes swapRightOut {
    0% {
      -webkit-transform: translate3d(0px, 0px, 0px) rotateY(0deg);
      opacity:1;
    }
    35% {
      -webkit-transform: translate3d(180px, 0px, -400px) rotateY(-20deg);
      opacity:.5;
    }
    100% {
      -webkit-transform: translate3d(0px, 0px, -800px) rotateY(-70deg);
      opacity:0;
    }
  }
}
